// 3.封装函数，主要是为了对单个数据做数据劫持
function defineReactive(_data, key, value) {
    Object.defineProperty(_data, key, {
        get() {
            console.log('正在获取' + key + '的值');
            return value
        },
        set(newVal) {
            if (newVal === value) return

            console.log('正在设置' + key + '的值');
            value = newVal
        }
    })
}

// 2. 封装一个observe函数，接收_data，遍历_data的值，一个个的进行数据劫持
function observe(_data) {
    for (let key of Object.keys(_data)) {
        // 把每一个数据的响应式核心代码交给defineReactive函数处理
        defineReactive(_data, key, _data[key])
    }
}


// 1.封装一个Vue的构造函数
function Vue(options) {
    this._data = options.data

    // 数据代理，把_data中的属性取出来，一个个放在vue实例上
    for (let key of Object.keys(this._data)) {
        Object.defineProperty(this, key, {
            get() {
                return this._data[key]
            },
            set(newVal) {
                this._data[key] = newVal
            }
        })
    }

    // 拿到_data的数据开始进行响应式操作，
    observe(this._data)
}

// 实例化
const vm = new Vue({
    data: {
        count: 1,
        course: {
            type: 'easy',
            name: 'html'
        }
    }
})


console.log(vm);

function huoqu() {
    console.log(vm.count);
}

function shezhi() {
    vm.count++
}

huoqu()
shezhi()